<template>
  <div class="page-head">
    <a href="javascript:;" @click="backToList" class="go-back">
      <img src="@/assets/img/layout/logo.png" alt="" class="logo">
      返回频道列表
    </a>
    <div class="page-operate">
      <el-button :loading="saveLoading" type="primary" @click="saveAndContinue" size="medium">保存</el-button>
      <el-button :loading="previewLoading" @click="saveAndView" size="medium">预览</el-button>
    </div>
  </div>
</template>

<script>
import { saveCmsPage } from '@/api/activity'
export default {
  name: 'pagehead',

  data() {
    return {
      onlineLoading: false,
      //定义按钮的loading状态
      saveLoading: false,
      //预览按钮loading状态
      previewLoading: false
    };
  },

  mounted() {
    console.log(this.pageData);
  },

  methods: {
    backToList() {
      console.log(window.opener.location.hash);
      //window.opener可以判断页面是从另一个页面新建跳转过来还是直接新建页面通过url跳转过来
      //给父窗口做个容错 如果是从activity跳转过来 那么就关闭父窗口 新打开一个窗口
      try {
        if (window.opener && window.opener.location.hash === '#/activity') {
          window.opener.close()
        }
        this.$router.push('/activity')
      } catch (error) {
        //如果不是 直接跳转
        this.$router.push('/activity')
      }
    },
    //保存方法
    saveAndContinue() {
      //loading状态改为true
      this.saveLoading = true
      //调用保存数据的方法 相当于链式调用
      this.savePage().then(({ data }) => {
        this.$message.success('保存成功')
      }).catch((err) => {
        this.$message.warning(`'保存失败了:'${err.$message}`)
      }).finally(() => {
        this.saveLoading = false
      })
    },
    //预览 2种情况 1编辑 会通过id拿到数据 2新增 后端会返回一个id 拿到后跳转 加入到参数里
    saveAndView() {
      this.previewLoading = true
      //online：1表示为标识 说明数据为草稿
      this.savePage({ online: 1 }).then((res) => {
        this.$message.success('保存成功')
        //如果没有新增页面会返回id 如果没有id 就是编辑页面
        const hasId = res && res.data ? res.data.id : ''
        if (hasId) {
          this.goToView(hasId)
        } else {
          //编辑页面 直接从url上拿
          this.goToView(this.$route.query.id)
        }
      }).catch((err) => {
        this.$message.warning(`上架并且预览失败:${err.message}`)
      }).finally(() => {
        this.previewLoading = false
      })
    },
    //保存页面数据方法
    savePage(params) {
      let pageData = { ...this.pageData, ...params }
      console.log(pageData, 'savepage', params);
      //给保存的数据添加索引 组件顺序混乱
      pageData.componentList.forEach((item, index) => {
        item.sort = index
      })
      //调用接口 返回一个promise对象
      return saveCmsPage(pageData).then((res) => {
        console.log(res, 'resssppp2');

        //如果是新增页面 调用接口后需要把id加入到pageData数据中
        if (res && res.data && res.data.id) {
          this.$router.push(`/decorate?id=${res.data.id}`)
          const cloneData = JSON.parse(JSON.stringify(this.pageData))
          cloneData.id = res.data.id
          //然后跳转到详情页面
          console.log(res.id, "ressssiddddddd");
          //然后调用更新数据函数
          this.$store.commit('UPDATE_COMPONENT',{data:cloneData})


        }
        return res

      })
    },
    //跳转预览页面函数
    goToView(id) {
      //新开页面跳转
      const url = this.$router.resolve({
        path: 'preview',
        query: { id }
      })
      window.open(url.href, '_blank')
    },
    // 上架
    saveAndPut() {
      this.onlineLoading = true
      let data = { online: 1 }
      this.savePage(data).then(() => {
        this.$message.success('上架成功')
      }).catch((err) => {
        this.$message.warning(`上架失败: ${err.message}`)
      }).finally(() => {
        this.onlineLoading = false
      })
    },
  },
  computed: {
    pageData() {
      return this.$store.state.pageData
    }
  }
};
</script>
<style lang="less" scoped>
.page-head {
  padding: 0 20px;
  background-color: white;
  height: 55px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .go-back {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;

    img {
      margin-left: 4px;
      width: 30px;
      height: 30px;
    }
  }
}
</style>